<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags"  prefix="s"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>传智商城</title>

    <link href="${pageContext.request.contextPath}/css/slider.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body{
            position: relative;
        }
        .mask{
            background: rgba(0,0,0,.4);
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            position: absolute;
            z-index: 20;
            display: none;
        }
        #form{
            width: 500px;
            margin: 120px auto;
            text-align: center;
            background: white;
            position: relative;
        }
        #form>.remove{
            position: absolute;
            right: 8px;
            top: 3px;
            width: 8px;
            height: 8px;
            top: 2px;
            right: 0px;
        }
        #form>.remove:hover{
            background: #888888;
            color: red;
        }
        #form>textarea{
            width: 400px;
            color: #000000;
            margin: 30px;
            margin-bottom: 10px;
            background: #fffeee;
        }
        .wlfw{
            /*float: left;*/
            list-style: none;
            height: 10px;
            line-height: 10px;
        }
        .wlfw-item{
            display: inline-block;
            margin-right: 5px;
        }
        .gwty{
            /*float: left;*/
            list-style: none;
            height: 10px;
            line-height: 10px;
        }
        .gwty-item{
            display: inline-block;
            margin-right: 5px;
        }
        .kfpj{
            /*float: left;*/
            list-style: none;
            height: 10px;
            line-height: 10px;
        }
        .kfpj-item{
            display: inline-block;
            margin-right: 5px;
        }

    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>
</head>
<body>
    <jsp:include page="menu.jsp"/>

    <div class="span24">
        <table style="text-align: center; margin: 0 auto;">
            <h2>请对这次购物做出评价^o^</h2>
            <thead>
                <tr>
                    <%--<th></th>--%>
                    <th>图片</th>
                    <th>商品名</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${requestScope.orderItems}" var="orderItem">
                    <tr>
                        <%--<td><input type="hidden" id="value="${orderItem.oid}"/> </td>--%>
                        <td><img src="${orderItem.product.image}" alt="${orderItem.product.pname}" style="width: 80px;height: 120px;margin: 5px auto;"/></td>
                        <td>${orderItem.product.pname}</td>
                        <c:if test="${orderItem.evaluation==null||''==orderItem.evaluation}">
                            <td><button onclick="evaluateItem(${orderItem.itemid},${orderItem.oid})">评价</button></td>
                        </c:if>
                        <c:if test="${orderItem.evaluation!=null&&''!=orderItem.evaluation}">
                            <td style="color: red;">已评价</td>
                        </c:if>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
    <div class="mask">
        <div id="form">
            <span class="remove">X</span>
            <input type="hidden" id="itemId" value=""/>
            <input type="hidden" id="oId" value=""/>
            <textarea></textarea>
            <ul class="gwty">
                购物体验：
                <li class="gwty-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span> </li>
                <li class="gwty-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="gwty-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="gwty-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="gwty-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
            </ul>
            <ul class="wlfw">
                物流服务：
                <li class="wlfw-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span> </li>
                <li class="wlfw-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="wlfw-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="wlfw-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="wlfw-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
            </ul>
            <ul class="kfpj">
                客服服务：
                <li class="kfpj-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span> </li>
                <li class="kfpj-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="kfpj-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="kfpj-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
                <li class="kfpj-item"><span class="glyphicon glyphicon-star" style="text-align: center"></span></li>
            </ul>
            <button style="right: 5px;bottom: 3px;background: #66f4df"> 提交 </button>
        </div>
    </div>

    <div class="container footer">
        <div class="span24">
            <div class="footerAd">
                <img src="${pageContext.request.contextPath}/image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势">
            </div>
        </div>
        <div class="span24">
            <ul class="bottomNav">
                <li>
                    <a href="#">关于我们</a>
                    |
                </li>
                <li>
                    <a href="#">联系我们</a>
                    |
                </li>
                <li>
                    <a href="#">诚聘英才</a>
                    |
                </li>
                <li>
                    <a href="#">法律声明</a>
                    |
                </li>
                <li>
                    <a>友情链接</a>
                    |
                </li>
                <li>
                    <a target="_blank">支付方式</a>
                    |
                </li>
                <li>
                    <a target="_blank">配送方式</a>
                    |
                </li>
                <li>
                    <a >SHOP++官网</a>
                    |
                </li>
                <li>
                    <a>SHOP++论坛</a>

                </li>
            </ul>
        </div>
        <div class="span24">
            <div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var $wlnum,$gwnum,$kfnum;
            $(".remove").on('click',function () {
                $(".mask").css("display","none");
            });
            $(".gwty>.gwty-item").on('click',function () {
                $gwnum = $(this).index()+1;console.log($gwnum)
                $(this).nextAll().css('color','black');
                $(this).css('color','red');
                $(this).prevAll().css('color','red');
            });
            $(".wlfw>.wlfw-item").on('click',function () {
                $wlnum = $(this).index()+1;console.log($wlnum)
                $(this).nextAll().css('color','black');
                $(this).css('color','red');
                $(this).prevAll().css('color','red');
            });
            $(".kfpj>.kfpj-item").on('click',function () {
                $kfnum = $(this).index()+1;console.log($kfnum)
                $(this).nextAll().css('color','black');
                $(this).css('color','red');
                $(this).prevAll().css('color','red');
            });

            $('#form>button').on('click',function () {
                var $content =$("#form>textarea").val();
                var $itemId = $("#itemId").val();
                var $oId = $("#oId").val();
                console.log('content:'+$content+" itemId:"+$itemId);
                console.log('评价:'+$wlnum+','+$gwnum+','+$kfnum);
                if ($content==''||$wlnum==''||$gwnum==''||$kfnum=='') {
                    $("#form").innerHTML = '客官..还未星评呢 /_\\:';
                    return false;
                }

                $.ajax({
                    type:'POST',
                    url:'evluateOrderItem',
                    data:JSON.stringify({'itemid':$itemId,'evaluation':$content,'gwpj':$gwnum,'kfpj':$kfnum,'wlpj':$wlnum}),
                    // dataType:'json',
                    contentType:"application/json;charset=utf-8",
                    success:function (msg) {
                        console.log(msg);
                        if (msg=='ok'){
                            $(".mask").css("display","none");
                            window.location.href = "/toevaluation?oid="+$oId;
                        }
                    },
                    error:function (xhr) {
                        alert(xhr.status);
                    }
                });
            })

        });
        
        /*function gupj() {
            $gwnum = $(this).index()+1;console.log($gwnum)
            $(this).nextAll().css('color','black');
            $(this).css('color','red');
            $(this).prevAll().css('color','red');
        }
        function wlpj() {
            $wlnum = $(this).index()+1;console.log($wlnum)
            $(this).nextAll().css('color','black');
            $(this).css('color','red');
            $(this).prevAll().css('color','red');
        }
        function kfpj() {
            $kfnum = $(this).index()+1;console.log($kfnum)
            $(this).nextAll().css('color','black');
            $(this).css('color','red');
            $(this).prevAll().css('color','red');
        }*/

        function evaluateItem(itemid,oid) {
            $(".mask").css("display","block");
            $("#itemId").val(itemid);
            $("#oId").val(oid);
        };

        function tijiao() {
            var $content =$("#form>textarea").val();
            var $itemId = $("#itemId").val();
            var $oId = $("#oId").val();
            console.log('content:'+$content+" itemId:"+$itemId);
            console.log('评价:'+$wlnum+','+$gwnum+','+$kfnum);
            
            $.ajax({
                type:'POST',
                url:'/evluateOrderItem',
                data:JSON.stringify({'itemid':$itemId,'evaluation':$content}),
                // dataType:'json',
                // contentType:"application/json;charset=utf-8",
                success:function (msg) {
                    console.log(msg);
                    if (msg=='ok'){
                        $(".mask").css("display","none");
                        window.location.href = "/toevaluation?oid="+$oId;
                    }
                },
                error:function (xhr) {
                    alert(xhr.status);
                }
            });
        }
    </script>
</body>
</html>
